
<html>
<head>
    <title>HTTP-Flv Test</title>
</head>
<script src="/static/jquery.min.js" type="text/javascript"></script>
<script src="/static/mpegts.js" type="text/javascript"></script>
<body style="background-color: #666666">

<div id="xxoo" style="background-color: #333333;border-radius: 10px; overflow: hidden; width: 800px; height: 600px;"></div>
<!--
<video id="xxoo" style="background-color: #333333;border-radius: 10px; overflow: hidden; width: 800px; height: 600px;" controls></video>
-->
 <input id="url" style="width: 300px; height: 30px;"  value="ws://localhost:3333/websocket/video/flv/013300000001-2"/>
<script type="text/javascript">

</script>
<script type="text/javascript">
    var player;
    let playVideo = () => {
        if (null != player) {
            player.destroy();
            player = null;
            $('#xxoo').html('');
        }
        let config = {
            liveBufferLatencyChasing: true,
            //liveBufferLatencyMaxLatency: 5,
            //liveBufferLatencyMinRemain: 1,
            enableStashBuffer: true,
            enableWorker: true,
            stashInitialSize: 64,
            isLive: true,
            liveBufferLatencyChasingOnPaused: true,
            liveSync: true,
            //liveSyncMaxLatency: 2,
            //liveSyncTargetLatency: 1,
            //lazyLoadMaxDuration: 10,
            //lazyLoadRecoverDuration: 10,
            autoCleanupSourceBuffer: true,
            //autoCleanupMaxBackwardDuration: 10,
            //autoCleanupMinBackwardDuration: 5,

    
        };
        player = mpegts.createPlayer(
          {
            type: 'mse', // mse,flv
            isLive: true,
            url: $('#url').val(),
            hasAudio: true,
            hasVideo: true,
            enableStashBuffer: true
          },
          config,
        );
        
        var videoElement = document.createElement('VIDEO');
        videoElement.autoplay = true;
        videoElement.controls = true;
        videoElement.muted = false;
        videoElement.style.width = '100%';
        videoElement.style.height = '100%';
        
        $('#xxoo').append(videoElement);
        
        //var videoElement = document.getElementById('xxoo');
        player.attachMediaElement(videoElement);
        player.load();
        player.play();
    };
</script>
<button onclick="playVideo()">Play Video</button>
</body>
</html>
